<template>
	<view>
		<view class="topSearch">
			<view class="tscont">
				<view class="tscontleft">
					<text>武汉</text>
					<navigator url="/pages/index/test">
						<uni-icons type="location" size="20" color="#fff"></uni-icons>
					</navigator>
				</view>
				<view class="tscontright">
					<view class="searchBox">
						<label>
							<uni-icons type="search" size="20"></uni-icons>
							<text>搜索医院</text>
						</label>
						<view class="spans">|</view>
						<label>
							<uni-icons type="search" size="20"></uni-icons>
							<text>搜索医生</text>
						</label>
					</view>
				</view>
			</view>
		</view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
				:duration="duration">
				<swiper-item>
					<view class="swiper-item uni-bg-red">BANNER ONE</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-green">BANNER TWO</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item uni-bg-blue">BANNER THREE</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="yuyueguahao">
			<text class="hh3">预约挂号</text>
			<view class="findDoctor">
				<view class="findone duli">
					<text class="oneh1">在线咨询/挂号</text>
					<text class="oneh2">AI智能推荐医院/医生</text>
					<navigator url="/pages/index/test">
						<button style="font-size: 14px;">立即咨询</button>
					</navigator>
				</view>
				<view class="findone" style="background-color: #468AFF;">
					<text class="oneh1">找医院</text>
					<navigator url="/pages/index/test">
						<text class="oneh2">查看附近医院</text>
					</navigator>
				</view>
				<view class="findone" style="background-color: #468AFF;">
					<text class="oneh1">找医生</text>
					<navigator url="/pages/index/test">
						<text class="oneh2">查看附近医生</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="keshiguahao">
			<view class="keshihead">
				<text>科室挂号</text>
				<navigator url="/pages/index/test"><text>全部科室 ></text></navigator>
			</view>
			<view class="keshibody">
				<swiper class="swiper1" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red">
							<view class="keshibycont">
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
							</view>

						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">
							<view class="keshibycont">
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
							</view>

						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">
							<view class="keshibycont">
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
								<view class="ks">
									<navigator url="/pages/index/test">
										<uni-icons type="flag-filled" size="20" color="#64BF07"></uni-icons>
									</navigator>
									<text>男科</text>
								</view>
							</view>

						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>热门医院</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="hotHospital_cont">
				<view class="hotHospital_box">

					<view class="hot_item"
						style="flex:none;background-image:url('/static/hot1.png'); height: 100px; width: 100px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; position: relative; overflow: hidden;">
						<view class="hot_cont_item">
							<text class="hot_title">眼科</text>
							<text class="hot_name">AI智能在线医院</text>
							<text class="hot_fenpei">提交订单就近分配</text>
						</view>
					</view>
					<view class="hot_item"
						style="flex:none;background-image:url('/static/hot1.png'); height: 100px; width: 100px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; position: relative; overflow: hidden;">
						<view class="hot_cont_item">
							<text class="hot_title">眼科</text>
							<text class="hot_name">AI智能在线医院</text>
							<text class="hot_fenpei">提交订单就近分配</text>
						</view>
					</view>
					<view class="hot_item"
						style="flex:none;background-image:url('/static/hot1.png'); height: 100px; width: 100px; background-position: center center; background-repeat: no-repeat; background-size: cover; border-radius: 10px; position: relative; overflow: hidden;">
						<view class="hot_cont_item">
							<text class="hot_title">眼科</text>
							<text class="hot_name">AI智能在线医院</text>
							<text class="hot_fenpei">提交订单就近分配</text>
						</view>
					</view>

				</view>
			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>按科室找医院</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="keshilist">
				<view class="keshilist_cont" id="keshilist_cont">
					<text :class="curData==1?'texts active':'texts'" @click="getHospitalData(1)">肛肠科</text>
					<text :class="curData==2?'texts active':'texts'" @click="getHospitalData(2)">肛肠科</text>
					<text :class="curData==3?'texts active':'texts'" @click="getHospitalData(3)">肛肠科</text>
					<text :class="curData==4?'texts active':'texts'" @click="getHospitalData(4)">肛肠科</text>
					<text :class="curData==5?'texts active':'texts'" @click="getHospitalData(5)">肛肠科</text>
					<text :class="curData==6?'texts active':'texts'" @click="getHospitalData(6)">肛肠科</text>
				</view>
			</view>
			<view class="keshi_hostpital_list">
				<view class="keshilist1">
					<navigator url="/pages/index/test">
						<image src="/static/hot1.png" mode="aspectFit"></image>
					</navigator>
					<view class="ks_ct_box">
						<navigator url="/pages/index/test">
							<text class="ks_til">武汉友好医院全科</text>
						</navigator>
						<view class="description">武汉友好医院是经国家卫生行政主管部门批准设准设准设准设</view>
						<view class="address">武汉市汉阳区鹦鹉大道197号(腰路堤)地铁4号线拦江路A口/6号线马鹦路B口</view>
					</view>
				</view>
				<view class="keshilist1">
					<navigator url="/pages/index/test">
						<image src="/static/hot1.png" mode="aspectFit"></image>
					</navigator>
					<view class="ks_ct_box">
						<navigator url="/pages/index/test">
							<text class="ks_til">武汉友好医院全科</text>
						</navigator>
						<view class="description">武汉友好医院是经国家卫生行政主管部门批准设准设准设准设</view>
						<view class="address">武汉市汉阳区鹦鹉大道197号(腰路堤)地铁4号线拦江路A口/6号线马鹦路B口</view>
					</view>
				</view>
				<view class="keshilist1">
					<navigator url="/pages/index/test">
						<image src="/static/hot1.png" mode="aspectFit"></image>
					</navigator>
					<view class="ks_ct_box">
						<navigator url="/pages/index/test">
							<text class="ks_til">武汉友好医院全科</text>
						</navigator>
						<view class="description">武汉友好医院是经国家卫生行政主管部门批准设准设准设准设</view>
						<view class="address">武汉市汉阳区鹦鹉大道197号(腰路堤)地铁4号线拦江路A口/6号线马鹦路B口</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>名医推荐</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="keshi_hostpital_list-doctor">
				<view class="list-doctors">
					<view class="list_doctor">
						<image src="/static/12924.png" mode="aspectFit"></image>
						<view class="doc_fuwu">AI智能在线值班客服</view>
						<view class="doc_fuwu" style="font-size:14px;">AI智能在线医院推荐</view>
						<view class="buts">
							<navigator url="/pages/index/test">预约挂号</navigator>
						</view>
					</view>
					<view class="list_doctor">
						<image src="/static/12924.png" mode="aspectFit"></image>
						<view class="doc_fuwu">AI智能在线值班客服</view>
						<view class="doc_fuwu" style="font-size:14px;">AI智能在线医院推荐</view>
						<view class="buts">
							<navigator url="/pages/index/test">预约挂号</navigator>
						</view>
					</view>
					<view class="list_doctor">
						<image src="/static/12924.png" mode="aspectFit"></image>
						<view class="doc_fuwu">AI智能在线值班客服</view>
						<view class="doc_fuwu" style="font-size:14px;">AI智能在线医院推荐</view>
						<view class="buts">
							<navigator url="/pages/index/test">预约挂号</navigator>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>对症找医</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="keshilist">
				<view class="keshilist_cont" id="keshilist_cont_one">
					<text :class="Dcurs==1?'texts active':'texts'" @click="getDoctorData(1)">白癜风</text>
					<text :class="Dcurs==2?'texts active':'texts'" @click="getDoctorData(2)">白癜风</text>
					<text :class="Dcurs==3?'texts active':'texts'" @click="getDoctorData(3)">白癜风</text>
					<text :class="Dcurs==4?'texts active':'texts'" @click="getDoctorData(4)">白癜风</text>
					<text :class="Dcurs==5?'texts active':'texts'" @click="getDoctorData(5)">白癜风</text>
					<text :class="Dcurs==6?'texts active':'texts'" @click="getDoctorData(6)">白癜风</text>
				</view>
			</view>
			<view class="keshi_hostpital_list">
				<view class="duizhen_doctor">
					<image src="/static/10735.png" mode="aspectFit"></image>
					<view class="desc">
						<text class="names">刘军连</text>
						<view class="desc_title">
							<view class="buts">主治医师</view>
							<view class="buts_desc">首都医科大学附属北京朝</view>
						</view>
					</view>
					<navigator url="/pages/index/test">
						<view class="buts">预约</view>
					</navigator>
				</view>

				<view class="duizhen_doctor">
					<image src="/static/10735.png" mode="aspectFit"></image>
					<view class="desc">
						<text class="names">刘军连</text>
						<view class="desc_title">
							<view class="buts">主治医师</view>
							<view class="buts_desc">首都医科大学附属北京朝</view>
						</view>
					</view>
					<navigator url="/pages/index/test">
						<view class="buts">预约</view>
					</navigator>
				</view>


				<view class="duizhen_doctor">
					<image src="/static/10735.png" mode="aspectFit"></image>
					<view class="desc">
						<text class="names">刘军连</text>
						<view class="desc_title">
							<view class="buts">主治医师</view>
							<view class="buts_desc">首都医科大学附属北京朝</view>
						</view>
					</view>
					<navigator url="/pages/index/test">
						<view class="buts">预约</view>
					</navigator>
				</view>


				<view class="duizhen_doctor">
					<image src="/static/10735.png" mode="aspectFit"></image>
					<view class="desc">
						<text class="names">刘军连</text>
						<view class="desc_title">
							<view class="buts">主治医师</view>
							<view class="buts_desc">首都医科大学附属北京朝</view>
						</view>
					</view>
					<navigator url="/pages/index/test">
						<view class="buts">预约</view>
					</navigator>
				</view>

			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>热门新闻</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="keshi_hostpital_list">

				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">首都医科大学附属北京朝</view>
							</view>
						</view>
					</view>
				</navigator>

				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">首都医科大学附属北京朝</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">首都医科大学附属北京朝</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">首都医科大学附属北京朝</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<view class="hotHospital">
			<view class="hotHospital_title">
				<text>热门视频</text>
				<navigator url="/pages/index/test">
					<button>查看更多</button>
				</navigator>
			</view>
			<view class="keshi_hostpital_list">

				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">2025-03-06</view>
							</view>
						</view>
					</view>
				</navigator>

				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">2025-03-06</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">2025-03-06</view>
							</view>
						</view>
					</view>
				</navigator>
				<navigator url="/pages/index/test">
					<view class="duizhen_doctor1">
						<image src="/static/3358.png" mode="aspectFit"></image>
						<view class="desc">
								<text class="names">口腔正畸:开启自信微笑的神奇之旅[北京口腔医院|北京中普瑞桐口</text>
							<view class="desc_title">
								<view>大同天佑医院</view>
								<view class="buts_desc">2025-03-06</view>
							</view>
						</view>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		onMounted,
		ref
	} from 'vue';

	export default {
		setup() {
			const indicatorDots = ref('true');
			const autoplay = ref('true');
			const interval = ref(2000);
			const duration = ref(500);
			const curData = ref(1);
			const Dcurs = ref(1);
			const getHospitalData = (obj) => {
				curData.value = obj;
			}
			const getDoctorData = (obj) => {
				Dcurs.value = obj;
			}
			return {
				indicatorDots,
				autoplay,
				interval,
				duration,
				getHospitalData,
				curData,
				getDoctorData,
				Dcurs
			}
		}
	}
</script>



<style>
	.topSearch {
		padding: 30px 0 80px 0;
		background-color: #64BF07;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;
	}

	.tscont {
		display: flex;
	}

	.tscontleft {
		flex: none;
		width: 80px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.tscontleft text {
		color: #fff;
		font-size: 14px;
	}

	.tscontright {
		flex: 1;
	}

	.searchBox {
		background-color: #fff;
		padding: 5px 0;
		margin: 0 20px;
		display: flex;
		border-radius: 20px;
		justify-content: space-evenly;
		align-items: center;
	}

	.searchBox text {
		font-size: 14px;
		color: #999;
	}

	.searchBox label {
		display: flex;
		align-items: center;
	}

	/*swiper CSS*/
	.uni-margin-wrap {
		position: relative;
		z-index: 2;
		margin-top: -50px;
	}

	.uni-margin-wrap .swiper {
		height: 140px;
		width: 94%;
		margin-left: 3%;
	}

	.uni-margin-wrap .swiper-item {
		height: 140px;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.uni-bg-red {
		background-color: aquamarine;
	}

	.uni-bg-green {
		background-color: aqua;
	}

	.uni-bg-blue {
		background-color: #f1f1f1;
	}

	.keshibody .swiper1 {
		min-height: 267px;
	}

	@media screen and (min-width:600px) {
		.keshibody .swiper1 {
			min-height: 347px;
		}
	}

	/*预约挂号*/
	.yuyueguahao {
		width: 94%;
		margin-left: 3%;
		margin-top: 20px;
	}

	.yuyueguahao .hh3 {
		font-size: 16px;
		font-weight: bold;
		font-style: normal;
	}

	.findone {
		border-radius: 10px;
		background-color: #07BF64;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: flex-start;
		padding: 20px;
	}

	.findone text {
		color: #fff;
	}

	.findone .oneh1 {
		font-size: 16px;
	}

	.findone .oneh2 {
		font-size: 12px;
	}

	.findDoctor {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
		margin-top: 30rpx;
	}

	.findDoctor .duli {
		grid-column: 1/2;
		grid-row: 1/3;
	}

	/*按科室挂号*/
	.keshiguahao {
		width: 94%;
		margin-left: 3%;
		margin-top: 20px;
		background-color: #07BF64;
		min-height: 200px;
		border-radius: 10px;
		padding-bottom: 10px;
	}

	.keshihead {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		color: #fff;
		font-size: 16px;
	}

	.keshihead text {
		font-size: 16px;
	}

	.keshibody {
		width: 96%;
		margin-left: 2%;
		min-height: 200px;
	}

	.keshibycont {
		padding: 20rpx;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		grid-gap: 1px;
		background-color: #07BF64;
	}

	.keshibycont .ks {
		display: flex;
		padding: 15rpx;
		flex-direction: column;
		background-color: #fff;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.keshibycont .ks text {
		margin-top: 15rpx;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.keshibycont .ks:nth-of-type(1) {
		border-top-left-radius: 18rpx;
	}

	.keshibycont .ks:nth-of-type(5) {
		border-top-right-radius: 18rpx;
	}

	.keshibycont .ks:nth-of-type(11) {
		border-bottom-left-radius: 18rpx;
	}

	.keshibycont .ks:nth-of-type(15) {
		border-bottom-right-radius: 18rpx;
	}

	/*热门医院*/
	.hotHospital {
		width: 94%;
		margin-left: 3%;
		margin-top: 20px;
		margin-bottom: 30px;
	}

	.hotHospital_cont {
		width: 100%;
		overflow-x: scroll;
	}

	.hotHospital_box {
		display: flex;
		padding: 20px 0;
	}

	.hotHospital_title {
		font-size: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 0;
	}

	.hotHospital_title text {
		font-weight: bold;
	}

	.hotHospital_title button {
		font-size: 12px !important;
		border-radius: 15px;
	}

	.hot_item {
		margin-right: 10px;
	}

	.hot_cont_item {
		position: absolute;
		bottom: 0;
		left: 0;
		top: 0;
		right: 0;
		background-image: linear-gradient(to bottom, transparent, #333);
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		font-size: 14px;
		color: #fff;
		padding: 10rpx;
	}

	.hot_cont_item .hot_title {
		background-color: #07BF64;
		width: fit-content;
		padding: 0 3px;
		border-radius: 2px;
	}

	.hot_cont_item .hot_name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	.hot_cont_item .hot_fenpei {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 12px;
	}

	/*按科室找医院*/
	.keshilist {
		width: 100%;
		overflow-x: scroll;
	}

	.keshilist_cont {
		display: flex;
		padding: 15px 0;
	}

	.keshilist_cont text {
		font-size: 14px;
		padding: 15px;
		flex: none;
		font-weight: bold;
		position: relative;
	}

	.keshilist_cont text.active::after {
		position: absolute;
		content: "";
		height: 3px;
		width: 15px;
		background-color: #07BF64;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
	}

	.keshilist1 {
		display: flex;
		width: 100%;
		justify-content: flex-start;
		align-items: center;
		margin: 10px 0;
	}

	.keshilist1 image {
		width: 80px;
		height: 80px;
		object-fit: cover;
	}

	.keshilist1 .ks_til {
		font-size: 14px;
		font-weight: bold;
	}

	.keshilist1 .description {
		font-size: 12px;
		width: 100%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.keshilist1 .ks_ct_box {
		padding: 10px;
		width: 100%;
		overflow: hidden;
	}

	.keshilist1 .address {
		font-size: 12px;
		margin-top: 8px;
		width: 92%;
	}

	.duizhen_doctor {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 18px;
	}

	.duizhen_doctor image {
		width: 60px;
		height: 60px;
		object-fit: cover;
		margin-right: 10px;
	}

	.duizhen_doctor .desc_title {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 14px;
		margin-top: 5px;
	}

	.duizhen_doctor .buts_desc {
		margin-left: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 60%;
	}

	.duizhen_doctor .buts {
		font-size: 12px;
		background-color: #64BF07;
		width: fit-content;
		padding: 3px;
		border-radius: 3px;
		color: #fff;
	}

	.duizhen_doctor .names {
		font-weight: bold;
		font-size: 14px;
	}

	.duizhen_doctor .desc {
		margin-right: auto;
	}

	/*名医推荐*/
	.hotHospital .list_doctor {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		width: 110px;
		border: 1px solid #eee;
		padding: 20px 10px;
		border-radius: 10px;
		margin: 10px 0;
		flex: none;
		margin-right: 10px;
	}

	.hotHospital .list_doctor .doc_fuwu {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin: 2px 0;
		font-size: 12px;
	}

	.hotHospital .list_doctor image {
		width: 45px;
		height: 45px;
	}

	.hotHospital .buts {
		font-size: 14px;
		background-color: #64BF07;
		width: fit-content;
		padding: 3px;
		border-radius: 3px;
		color: #fff;
	}

	.keshi_hostpital_list {
		margin: 20px 0;
	}

	.keshi_hostpital_list-doctor {
		width: 100%;
		overflow-x: scroll;
	}

	.keshi_hostpital_list-doctor .list-doctors {
		display: flex;
		padding: 20px 0;
	}

	/*新闻*/
	.duizhen_doctor1 {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		margin-bottom: 10px;
	}

	.duizhen_doctor1 image {
		width: 140px;
		height: 85px;
		object-fit: cover;
		margin-right: 10px;
		text-align: left;
	}

	.duizhen_doctor1 a {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.duizhen_doctor1 .desc_title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
		margin-top: 5px;
	}

	.duizhen_doctor1 .buts_desc {
		margin-left: 4px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 60%;
	}

	.duizhen_doctor1 .buts {
		font-size: 14px;
		background-color: #64BF07;
		width: fit-content;
		padding: 3px;
		border-radius: 3px;
		color: #fff;
	}

	.duizhen_doctor1 .names {
		font-weight: bold;
		font-size: 14px;
		overflow: hidden;
		display: -webkit-box;
		text-overflow: ellipsis;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.duizhen_doctor1 .desc {
		margin-right: auto;
	}
</style>